---
id: 613e275749ebd008e74bb62e
title: 步骤 8
challengeType: 0
dashedName: step-8
---

# --description--

_SVG_（可缩放矢量图形）的一个有用之处是它包含一个 `path` 属性，该属性允许在不影响图像分辨率的情况下缩放图像。

`img` 当前是默认尺寸，这个尺寸太大。 CSS提供了一个 `max` 函数，它返回一组由逗号分隔的值中最大的值。 例如：

```css
img {
  width: max(250px, 25vw);
}
```

In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width.

使用图像的 `id` 作为选择器，并将其 `width` 设置为 `100px` 或 `18vw` 中的最大值，以对图像进行缩放。

# --hints--

您应该使用 `#logo` 选择器来定位 `img` 元素。

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
```

你应该将 `img` 的 `width` 设置为 `max(100px, 18vw)`。

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav></nav>
    </header>
    <main></main>
  </body>
</html>

```

```css
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

--fcc-editable-region--

--fcc-editable-region--

```
